<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页智能总结</title>
    <link rel="stylesheet" href="sidepanel.css">
</head>
<body>
    <div class="container">
        <!-- 顶部区域 -->
        <div class="header">
            <h1>网页智能总结</h1>
            <span class="subtitle">（LP特别纪念版）</span>
            <div class="divider"></div>
        </div>

        <!-- 操作区域 - 总结按钮 -->
        <div class="action-area">
            <button id="summarizeBtn" class="summarize-btn">
                📝 一键总结当前页面
            </button>
            <div class="secondary-actions">
                <button id="settingsBtn" class="secondary-btn">⚙️ 设置</button>
                <button id="historyBtn" class="secondary-btn">📊 历史</button>
            </div>
        </div>

        <!-- 总结结果展示 -->
        <div id="resultArea" style="display: none;">
            <div class="result-card">
                <h3>💡 一句话总结</h3>
                <p id="mainContent"></p>
            </div>
            <div class="result-card">
                <h3>🔑 关键要点</h3>
                <div id="keyPoints"></div>
            </div>

            <div class="action-buttons">
                <button id="copyBtn" class="action-btn">复制总结</button>
                <button id="saveBtn" class="action-btn">保存记录</button>
                <button id="regenerateBtn" class="action-btn">重新生成</button>
            </div>
        </div>

        <!-- 设置面板 -->
        <div id="settingsPanel" class="panel" style="display: none;">
            <h3>⚙️ 设置</h3>
            <div class="divider"></div>
            <div class="setting-item">
                <label for="apiKey">KIMI API Key:</label>
                <input id="apiKey" type="password" placeholder="请输入API密钥" />
            </div>
            <div class="setting-item">
                <label for="modelSelect">模型选择:</label>
                <select id="modelSelect">
                    <option value="moonshot-v1-8k">moonshot-v1-8k</option>
                    <option value="moonshot-v1-32k">moonshot-v1-32k</option>
                    <option value="moonshot-v1-128k">moonshot-v1-128k</option>
                    <option value="kimi-latest">kimi-latest</option>
                    <option value="kimi-thinking-preview">kimi-thinking-preview</option>
                </select>
            </div>
            <div class="setting-item">
                <label for="maxTokens">最大Token数:</label>
                <input id="maxTokens" type="number" min="100" max="4096" value="1000" />
            </div>
            <div class="setting-item">
                <label for="autoSummarizeSwitch">
                    <input id="autoSummarizeSwitch" type="checkbox" /> 自动总结新打开的页面
                </label>
            </div>
            <div class="setting-buttons">
                <button id="saveSettingsBtn" class="primary-btn">保存设置</button>
                <button id="cancelSettingsBtn" class="cancel-btn">取消</button>
            </div>
        </div>

        <!-- 历史记录面板 -->
        <div id="historyPanel" class="history-panel" style="display: none;">
            <h3>📊 历史记录</h3>
            <div class="divider"></div>
            <div id="historyList" class="history-list"></div>
            <div class="history-buttons">
                <button id="clearHistoryBtn" class="secondary-btn">清空历史</button>
                <button id="closeHistoryBtn" class="secondary-btn">关闭</button>
            </div>
        </div>
    </div>

    <script src="sidepanel.js"></script>
</body>
</html> 